<template>
  <div class="divisional">
    <div class="search_box" style="">
      <el-row :gutter="20">

        <el-col :span="6">
          <span class="inpText">所属分行</span>
          <el-select v-model="branchCode" size="small" placeholder="请选择" :disabled="branchDisable">
            <el-option key="不限" label="不限" value=""></el-option>
            <el-option v-for="item in branchOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="6">
          <span class="inpText">所属支行</span>
          <el-select v-model="subBranchCode" size="small" placeholder="请选择" :disabled="subBranchDisable">
            <el-option key="不限" label="不限" value=""></el-option>
            <el-option v-for="item in subBranchOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>

        </el-col> -->

        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input v-model.trim="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
        </el-col>

        <el-col :span="6">
           <el-button size="small" type="primary" @click="search">查询</el-button>
           <el-button size="small" type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="400" style="width: 100%" >
          <el-table-column prop="outCompanyCode" label="机构编号"></el-table-column>
          <el-table-column prop="outsourcingCompany" label="机构名称"></el-table-column>
          <el-table-column prop="bank" label="所属银行"></el-table-column>
          <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat"></el-table-column>
          <el-table-column prop="endTime" label="结束日期" :formatter="endFormat"></el-table-column>
          <el-table-column prop="checkModel" label="对账模式" :formatter="checkFormat"></el-table-column>
          <!-- <el-table-column prop="profitMargin" label="佣金比率" :formatter="rate"></el-table-column> -->
          <el-table-column prop="state" label="是否启用">
            <template slot-scope="scope">
              <el-tag size="mini" effect="plain" v-if="scope.row.state == '1'">启用</el-tag>
              <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.state == '2'">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button> -->
              <el-button @click="Editdata(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>


    <el-dialog title="编辑" :visible.sync="isEdit" width="50%">
      <el-form label-width="110px" :model="detailInfo" :rules="rules" ref="ruleForm">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="机构编号" prop="code">
              <el-input v-model="detailInfo.outCompanyCode" autocomplete="off" size="small" class="searchInp" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="机构名称" prop="name">
              <el-input v-model="detailInfo.outsourcingCompany" autocomplete="off" size="small" class="searchInp" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="12">
            <el-form-item label="上级机构" prop="bank">
              <el-input v-model="detailInfo.bank" autocomplete="off" size="small" class="searchInp" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否启用" prop="state">
              <el-select v-model="detailInfo.state" placeholder="请选择" size="small">
                <el-option v-for="item in states" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime" >
              <el-date-picker
                  v-model="detailInfo.startTime"
                  type="date"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  class="searchInp"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime" >
              <el-date-picker
                  v-model="detailInfo.endTime"
                  type="date"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                   class="searchInp"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>



        <el-divider content-position="left">对账信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="对账方式" prop="checkModel" >
              <el-select v-model="detailInfo.checkModel" size="small" placeholder="请选择" @change="changeCheckModel" disabled>
                <el-option v-for="item in DZOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="detailInfo.checkModel == '1'">
          <el-col :span="12" >
            <el-form-item label="预付款比率" >

              <el-input v-model="detailInfo.backRates[0].agencyPrepay" onkeyup="if(value<0)value=0;if(value>100)value=100;"
                min="0" max="100" step="1" @input="((val) => {handleInput(val,'agencyPrepay')})" type="number" size="small"
                class="searchInp" style="vertical-align: middle !important;">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="预付款限额" >
              <el-input-number v-model="detailInfo.backRates[0].prepayMax" size="small"  :min="0" class="searchInp">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="回款提佣比率" >
              <el-input v-model="detailInfo.backRates[0].agencyReturnRate" onkeyup="if(value<0)value=0;if(value>100)value=100;"
                min="0" max="100" step="1" @input="((val) => {handleInput(val,'agencyReturnRate')})" type="number" size="small"
                class="searchInp" style="vertical-align: middle !important;">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div v-if="detailInfo.checkModel == '2'">
          <el-row :gutter="20" v-for="(item,index) in detailInfo.backRates" :key="item.key">
            <el-col :span="12" >
              <el-form-item label="逾期等级" >
                <el-select v-model="item.levelName" size="small" placeholder="请选择" class="searchInp" disabled>
                  <el-option v-for="level in levelOptions" :key="level.label" :label="level.label" :value="level.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="提佣比率" >
                <el-input v-model="item.comRate" onkeyup="if(value<0)value=0;if(value>100)value=100;" min="0" max="100"
                  step="1" @input="((val) => {handleInput(val, index, 'comRate')})" type="number" size="small" class="searchInp">
                  <template slot="append" width="25px">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>


        <div v-if="detailInfo.checkModel == '3'">

        <!-- <el-row :gutter="20" v-for="(item, index) in detailInfo.backRates" :key="item.key">
          <el-col :span="12" >
            <el-form-item label="回退率标准" prop="backRate">
              <el-input v-model="item.backRate" onkeyup="if(value<0)value=0;if(value>100)value=100;" :precision="2"
                min="0" max="100" step="1" @input="((val) => {handleInput(val,'backRate')})" type="number" size="small" class="searchInp">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="业务人数" prop="peopleNum">
              <el-input-number v-model="item.peopleNumber" size="small" :step="1" :max="100" :min="0" class="searchInp"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12" >
            <el-form-item label="人员单价(元)" prop="peoplePrice">
              <el-input-number v-model="item.peoplePrice" size="small" :step="10" :min="0" class="searchInp">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row :gutter="20" style="height: auto !important;">
          <el-col :span="12" >
            <el-form-item label="回退率标准">
              <el-input v-model="detailInfo.backRates[0].backStandard" onkeyup="if(value<0)value=0;if(value>100)value=100;" :precision="2"
                min="0" max="100" step="1" @input="((val) => {handleInput(val,'backRate')})" type="number" size="small" class="searchInp">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="业务人数">
              <el-input-number v-model="detailInfo.backRates[0].peopleNumber" size="small" :step="1"  :min="0" class="searchInp"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="12" >
            <el-form-item label="人员单价(元)">
              <el-input-number v-model="detailInfo.backRates[0].peoplePrice" size="small" :step="10" :min="0" class="searchInp">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        </div>

       <div>
        <el-row :gutter="20" >
        <el-divider content-position="left">分案信息</el-divider>
        </el-row>

        <el-row :gutter="20" >
          <el-col :span="12">
            <el-form-item label="服务类型" prop="category">
              <el-select v-model="detailInfo.category" size="small" placeholder="请选择" >
                <el-option v-for="item in serviceOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="detailInfo.category=='2'">
            <el-form-item label="服务卡种" prop="category" >
              <el-select v-model="detailInfo.caseType" size="small" placeholder="请选择" disabled>
                <el-option v-for="item in caseOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24" v-if="detailInfo.category=='2' && detailInfo.caseType!='99'">
            <el-form-item label="逾期等级" prop="acceptLevels"  :rules="[{required:true,message:'请选择逾期等级'}]">
              <el-checkbox-group v-model="detailInfo.acceptLevels"  disabled>
                <el-checkbox v-for="level in levelOptions" :key="level.label" :value="level.value" :label="level.label"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" >
          <el-col :span="12">
            <el-form-item label="分案权重" prop="powerValue">
              <el-select v-model="detailInfo.powerValue" placeholder="请选择" size="small" disabled>
                <el-option v-for="item in powerOptions" :key="item.value" :label="item.text" :value="item.value"></el-option>
              </el-select>
              <span style="display: block;margin-left: 47%;line-height: 13px;margin-top: -32px;color: red;">* 例如有100条委外数据，3家委外公司a、b、c的分按权重分别为5、3、2，则分案数分别为：50、30、20。</span>
            </el-form-item>
          </el-col>
        </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false;detailInfo={};" size="small">取 消</el-button>
        <el-button type="primary" @click="updateCompany('ruleForm')" size="small">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
  import { cmcUrl } from '../../../../static/baseUrl'
  const ExportJsonExcel = require('js-export-excel');
  export default {
    data() {
      return {
        branchDisable: false,
        subBranchDisable: false,
        branchCode: "",
        subBranchCode: "",
        branchOptions: [],
        subBranchOptions: [],
        loading: false,
        caseOptions: [{
          label: "不限",
          value: "99",
        },{
          label: "通联",
          value: "1",
        },{
          label: "银数",
          value: "2",
        },],
        levelOptions: [
          {
            label: "M1",
            value: "1",
          },
          {
            label: "M2",
            value: "2",
          },
          {
            label: "M3",
            value: "3",
          },
          {
            label: "M4",
            value: "4",
          },
          {
            label: "M5",
            value: "5",
          },
          {
            label: "M6",
            value: "6",
          },
          {
            label: "M6+",
            value: "7",
          },
        ],
        powerOptions: this.GLOBAL.powerOptions,
        DZOptions: this.GLOBAL.checkModelOptions,
        serviceOptions: [{
          label: "网贷数据",
          value: 1,
          disabled: true,
        },{
          label: "信贷数据",
          value: 2,
        }],

        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [{
            name: "机构名称",
            input_val: "",
          }
        ],

        tableData: [],

        //   详情
        detailInfo: {
          backRates: [],
        },
        isEdit: false,
        states: [{
          text: "启用",
          value: 1,
        },{
          text: "禁用",
          value: 2,
        },],
        //验证1
        rules: {
          startTime: [{required: true,message: "请输入开始日期",trigger: "blur"}],
          endTime: [{required: true,message: "请输入结束日期",trigger: "blur"}],
          powerValue: [{required: true,message: "请设置分案权重",trigger: "blur"}],

        },



        updateOptions: {},

      };
    },
    created() {

      this.getBranchOptions();
    },
    computed: {

    },
    watch:{
      'detailInfo.checkModel'(nValue,oVlaue){
        console.log("detailInfo.caseType   oVlaue=",oVlaue,"------nValue==",nValue);
        if(nValue=="2"){//
          this.detailInfo.caseType = "99";
          this.caseOptions.forEach((item) => {
            console.log("item,,",item);

            if(item.value != "99"){
              this.$set(item,"disabled",true);
              //item.disabled = "true";
            }else{
              this.$set(item,"disabled",false);
            }
            this.caseOptions.splice(this.caseOptions.indexOf(item),1,item);
          });
          //不限卡种时，将逾期等级去除，
          this.detailInfo.acceptLevel = [];

        }else if(nValue=="1"){//固定代理类
          this.caseOptions.forEach((item) => {
            this.detailInfo.caseType = "99";
          	let ttt = this.caseOptions[item];
            if(item.value == "99"){
              this.$set(item,"disabled",true);//禁用卡种的无限
            }else{
              this.$set(item,"disabled",false);
            }
            this.caseOptions.splice(this.caseOptions.indexOf(item),1,item);
          });

        }else {
          this.caseOptions.forEach((item) => {
            this.detailInfo.caseType = "1";
          	let ttt = this.caseOptions[item];
            if(item.value == "99"){
              this.$set(item,"disabled",true);
            }else{
              this.$set(item,"disabled",false);
            }
            this.caseOptions.splice(this.caseOptions.indexOf(item),1,item);
          });
        }
      }
    },
    methods: {
      checkFormat(row,column,cellValue,index){
        let ttt = this.DZOptions.find((element) => (element.value == cellValue))
        return ttt ? ttt.label : "";
      },
      //获取所有分行列表
      getBranchOptions(){
        let branch = localStorage.getItem('BRANCH');
        this.branchCode = branch;

        this.$axios({
            method: "get",
            url: `/CMC/group/listFen`,
            data: "",
          })
          .then((res) => {
            console.log("获取分行数据==",res);
            if (res.code == 200) {
              this.branchOptions = res.data;

              if(branch){
                this.branchDisable = true;
              }
              //this.getSubBranchOptions(branch);
            } else {
              console.error("获取分行出错，，",res.message);
            }
            this.search();
          })
          .catch((err) => {console.log(err)});
      },
      //根据分行获取支行列表
      getSubBranchOptions(codeStr){

        if(codeStr){
          let ttt = this.branchOptions.find((element) => (element.code == codeStr));
          this.$axios({
              method: "get",
              url: `/CMC/group/listZhiByFen?id=`+ttt.id,
              data: "",
            })
            .then((res) => {
              console.log("获取支行信息==",res);
              if (res.code == 200) {
                let subBranch = localStorage.getItem('SUBBRANCH');
                this.subBranchCode = subBranch;
                this.subBranchOptions = res.data;
                if(subBranch){
                  this.subBranchDisable = true;
                }
                this.search();
                //this.total = Number(res.data.total);
              } else {
                console.error("获取支行出错，，",res.message);
              }
            })
            .catch((err) => {console.log(err)});
          }
      },

      dateFormat(row){
        let startDate = row.startTime;
        let startStr = this.$moment(startDate).format("YYYY-MM-DD");
        return startStr;
      },
      endFormat(row){
        let endDate = row.endTime;
        let endStr = this.$moment(endDate).format("YYYY-MM-DD");
        return endStr;
      },
      //保留两位小数
      handleInput(value){
        if (value != '') {
            if (value.indexOf('.') > -1) {
                  this.detailInfo.profitMarginStr = value.slice(0, value.indexOf('.') + 3);
             } else {
                  this.detailInfo.profitMarginStr = value;
             }
        }
      },
      rate(row) {
        let vv = row.profitMargin;
        if(vv!="" && vv!=null && vv!=undefined){
          return this.toPercent(vv);
        }else{
          return "";
        }
      },
      //百分数转小数
      toPoint(percent){
        var str=percent.replace("%","");
            str= str/100;
        return str;
      },
      //小数转百分数
      toPercent(point){
        var percent = Number(point*100).toFixed(2);
        percent+="%";
        return percent;
      },


      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },

      handleClick(data) {
        console.log(data, "sss");
      },
      Editdata(data){

        /* this.detailInfo = JSON.parse(JSON.stringify(data)); */
        let options = {
          companyId: data.id,
        }
        this.$axios({
            method: "post",
            url: `/CMC/outsourcingCompany/details`,
            params: options,
          }).then((res) => {
                console.log(res, "获取数据");
                if (res.code == 200) {
                  this.detailInfo = res.data;
                  console.log("this.detailInfo===",this.detailInfo);
                  this.setNullIsLing();
                  //回显比率值及逾期等级名称
                  this.showRateValue();
                  //回显所选分案的逾期等级
                  this.showLevelName();

                  this.isEdit = true;
                } else {
                  //Message.warning(res.message);
                  console.warn(res.message)
                };

              })
            .catch((err) => {});

      },
      //回显不同逾期等级名称
      showLevelName(){
        if(this.detailInfo.acceptLevels.length>0){
          let levelName = [];
          this.detailInfo.acceptLevels.forEach((item,index) => {
            if(item.levelName){
              let ttt = this.levelOptions.find((element) => (element.value == item.levelName));
              if(ttt){
                levelName.push(ttt.label);
              }
            }
          })
          this.$set(this.detailInfo,"acceptLevels",levelName);
        }
      },
      setNullIsLing(){
        let lingArr = ["agencyPrepay","prepayMax", "agencyReturnRate", "comRate", "backStandard", "peopleNumber", "peoplePrice"];
        this.detailInfo.backRates.forEach((item,index) => {
          for (var j = 0, len = lingArr.length; j < len; j++) {
            let prop = lingArr[j];
            if(!item.hasOwnProperty(prop)){
              this.$set(item,prop,0);
            }
          }
        })
        if(!this.detailInfo.hasOwnProperty("acceptLevels")){
          this.detailInfo.acceptLevels = []
        }
      },
      //回显信息中的百分率取值
      showRateValue(){
        let tempArr = ["agencyPrepay", "agencyReturnRate", "comRate", "backStandard"];
        if(this.detailInfo.backRates.length>0){
          this.detailInfo.backRates.forEach((item,index) => {
            for (var j = 0, len = tempArr.length; j < len; j++) {
              let prop = tempArr[j];
              if(item.hasOwnProperty(prop)){
                let sValue = item[prop];
                if(null!=sValue && sValue!=''){
                  let nValue = this.cal.accMul(sValue,100);
                  this.$set(item,prop,nValue);
                }
              }
            }

            //回显不同等级的逾期名称
            if(item.levelName){
              let vv = item.levelName;
              let ttt = this.levelOptions.find((element) => (element.value == vv));
              if(ttt){
                this.$set(item,"levelNameStr",ttt.value);
              }
            }else{
              this.$set(item,"levelName","1");
              this.$set(item,"comRate","0");
              this.$set(item,"levelNameStr","M1");
            }

            this.detailInfo.backRates.splice(index,1,item);
          })

        }

      },


      //切换对账方式时，清楚字段的验证信息
      changeCheckModel(){

        this.$refs['ruleForm'].clearValidate();//仅删除验证提示

        if(this.detailInfo.checkModel=='2'){
          let ss = this.detailInfo.backRates.length;
          if(ss<7){//说明原数据不是回退率标准
            this.levelOptions.forEach((item,index)=>{
              if(index>=ss){
                this.detailInfo.backRates.push({
                    levelNameStr: item.label,
                    levelName: item.value,
                    backStandard: "0",
                    peopleNumber: "0",
                    peoplePrice: "0",
                    comRate: "0",
                    agencyPrepay: "0",
                    prepayMax: "0",
                    agencyReturnRate: "0",
                });
              }
            })
          }
        }
      },

      updateOptionsRate(){
        if (this.updateOptions.checkModel == "1") {
          //档修改前的提佣比率条数大于1，时只取第一条
          if(this.updateOptions.backRates.length>1){
            let arr = [];
            arr.push(this.updateOptions.backRates[0]);
            this.$set(this.updateOptions,"backRates",arr);
          }
          let ss1 = ["agencyPrepay", "agencyReturnRate"];
          this.setStrToDoubles(ss1);
          let ss2 = ["levelName", "backStandard", "peopleNumber", "peoplePrice", "comRate"];
          this.setNulls(ss2);
          this.updateOptions.acceptLevel = "";
        } else if (this.updateOptions.checkModel == "2") {
          let ss1 = ["comRate"];
          this.setStrToDoubles(ss1);
          let ss2 = ["backStandard", "peopleNumber", "peoplePrice", "agencyPrepay", "agencyReturnRate","prepayMax"];
          this.setNulls(ss2);
          this.updateOptions.acceptLevel = "";
        } else if (this.updateOptions.checkModel == "3") {
          //档修改前的提佣比率条数大于1，时只取第一条
          if(this.updateOptions.backRates.length>1){
            let arr = [];
            arr.push(this.updateOptions.backRates[0]);
            this.$set(this.updateOptions,"backRates",arr);
          }

          let ss1 = ["backStandard"];
          this.setStrToDoubles(ss1);
          let ss2 = ["levelName", "agencyPrepay", "agencyReturnRate", "prepayMax"];
          this.setNulls(ss2);

          let LevelStr = [];
          this.updateOptions.acceptLevels.forEach((item, index) => {
            let sss = this.levelOptions.find((map) => (map.label = item));
            if(sss){
              LevelStr.push(sss.value);
            }
          })
          if(LevelStr.length>0){
            this.updateOptions.acceptLevel = LevelStr.join(",");
          }
          //将levelName置为空字符
          this.updateOptions.backRates.forEach((item, index) => {
            this.$set(item, "levelName", "");
            this.updateOptions.backRates.splice(index,1,item);
          })
        }
      },
      setStrToDoubles(props) {
        if (props.length > 0) {
          for (var j = 0, len = props.length; j < len; j++) {
            let prop = props[j]
            console.log(props, "j=", j, ";;prop=", prop);
            this.updateOptions.backRates.forEach((item, index) => {
              if(item[prop]){
                let rate = this.cal.accDiv(item[prop], 100);
                //let rate = this.cal.accDiv(item[prop], 100);
                this.$set(item, prop, rate);
                this.updateOptions.backRates.splice(index,1,item);
              }
            })
          }
        }
      },
      setNulls(props) {
        if (props.length > 0) {
          for (var j = 0, len = props.length; j < len; j++) {
            let prop = props[j]
            console.log(props, "j=", j, ";;prop=", prop);
            this.updateOptions.backRates.forEach((item, index) => {
              if(item.hasOwnProperty(prop)){
                this.$delete(item, prop);
                this.updateOptions.backRates.splice(index,1,item);
              }
            })
          }
        }
      },


      //保存委外公司信息
      updateCompany(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateOptions = JSON.parse(JSON.stringify(this.detailInfo));
            console.log("this.updateOptions,,",this.updateOptions);
            this.updateOptionsRate();

            console.log("this.updateOptions===",this.updateOptions);
            let str = JSON.stringify(this.updateOptions.backRates);
            this.$set(this.updateOptions, "backRates", str);


            this.$axios({
                method: "post",
                url: `/CMC/outsourcingCompany/update`,
                data: this.updateOptions,
              })
              .then((res) => {
                if (res.code == "200") {
                  console.log("res==", res);
                  this.$message.success("保存成功!");
                  this.isEdit = false;
                  this.detailInfo = {};
                  this.updateOptions = {};
                  this.checkInfo();
                }
              });
          }
        });
      },
      //设置不同对账方式的各种比率
      updateRate(){
        if(this.updateOptions.checkModel=="1"){
          let ss1=["agencyPrepay","agencyReturnRate"];
          this.setStrToDouble(ss1);
          let ss2=["rateM1","rateM2","rateM3","rateM4","rateM5","rateM6","rateM6Plus"];
          this.setNull(ss2);
          let ss3=["backRate","peopleNum","peoplePrice"];
          this.setNull(ss3);
        }else if(this.updateOptions.checkModel=="2"){
          let ss1=["agencyPrepay","agencyReturnRate"];
          this.setNull(ss1);
          let ss2=["rateM1","rateM2","rateM3","rateM4","rateM5","rateM6","rateM6Plus"];
          this.setStrToDouble(ss2);
          let ss3=["backRate","peopleNum","peoplePrice"];
          this.setNull(ss3);
        }else if(this.updateOptions.checkModel=="3"){
          let ss1=["agencyPrepay","agencyReturnRate"];
          this.setNull(ss1);
          let ss2=["rateM1","rateM2","rateM3","rateM4","rateM5","rateM6","rateM6Plus"];
          this.setNull(ss2);
          let ss3=["backRate"];
          this.setStrToDouble(ss3);
        }
      },
      setStrToDouble(props){
        if(props.length>0){
          for(var j = 0,len = props.length; j < len; j++){
            let prop = props[j]
            console.log(props,"j=",j,";;prop=",prop);
            if(this.updateOptions[prop]){
              let rate = this.cal.accDiv(this.updateOptions[prop],100);
              this.$set(this.updateOptions,prop,rate);
            }
          }
        }
      },
      setNull(props){
        if(props.length>0){
          for(var j = 0,len = props.length; j < len; j++){
            let prop = props[j]
            console.log(props,"j=",j,";;prop=",prop);
            this.$delete(this.updateOptions,prop);
          }
        }
      },
      search(){
        this.currentPage = 1;
        this.checkInfo();
      },

      reset() {
        this.list_1[0].input_val = "";
        //this.list_1[1].input_val = "";
        if(!branchDisable){
          this.branchCode = "";
        }
      },
      checkInfo() {
        let name = this.list_1[0].input_val;
        //let bank = this.list_1[1].input_val;
        this.loading = true;
        let options = {
          userCode: localStorage.getItem('USER_CODE'),
          branch: this.branchCode,
          outsourcingCompany: name,
          page: this.currentPage,
          pageSize: this.pageSize,
        };

        this.$axios({
            method: "post",
            url: `/CMC/outsourcingCompany/list`,
            data: options,
          })
          .then((res) => {
            console.log(res, "查询数据");
            this.loading = false;
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              //Message.warning(res.message);
              console.error(res.message);
            };
          })
          .catch((err) => {});
      },

      exportConfirm(){
         let msg="是否导出当前检索结果数据?";
         //let removeid = data.id;
         this.$confirm(msg,"提示",{
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'success'
           }).then(()=>{
             this.exportExcel();
             console.log("导出数据成功！");
           }).catch((err) => {console.log("err",err)});
      },
      exportExcel(){
        let option={};
        option.fileName = 'textexport'
        option.datas=[
          {
            sheetData: this.tableData,
            sheetName: '分案数据',
            sheetFilter: this.excelColumn,
            sheetHeader: this.excelTitle,
            columnWidths: [10,10,20,10]//对应的列宽，置为屏宽的百分比，40%
          },
        ];

        var toExcel=new ExportJsonExcel(option);
        toExcel.saveExcel();
      }
    },


  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/base.css";
  .divisional {
   /deep/ .el-row:nth-child(1) {
       width: 100%;
       height: 66px;
       // background: pink;
       padding: 0;
       margin: 0;

       .el-col {
         padding: 0;
         height: inherit;
         /* border: 1px solid slategrey; */
         box-sizing: border-box;
         overflow: hidden;

         div:nth-child(1) {
           width: 100%;
           height: inherit;
           //   background: yellowgreen;
           //display: flex;
           flex-wrap: wrap;
           // justify-content: flex-start;
           justify-content: space-around;
           //box-sizing: border-box;
           /* padding-left: 30px;
           padding-top: 40px; */


           .v_box {
             width: 20%;
             height: 8vh;
             margin-left: 15px;
             margin-right: 40px;
             // margin-bottom: 10px;
             // background: chocolate;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             padding: 0;
             border: none;

             div {
               padding: 0;
             }

             &:nth-child(7) {

               .el-date-editor--daterange.el-input,
               .el-date-editor--daterange.el-input__inner,
               .el-date-editor--timerange.el-input,
               .el-date-editor--timerange.el-input__inner {
                 width: 100%;
               }
             }

             &:last-child {
               display: flex;
               flex-direction: row;
               justify-content: center;
               align-items: center;

               .el-button {
                 width: 70px;
                 height: 30px;

                 &:first-child {
                   margin-right: 10px;
                 }
               }
             }
           }
         }
       }
     }

     /deep/ .el-row:nth-child(2) {
       width: 100%;
      /* height: 60vh; */
       // background: pink;
       padding: 0;
       margin: 0;
       //margin-top: 10px;

       table {
         tbody {
           tr {
             td {
               .cell {
                 box-sizing: border-box;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-break: normal !important;
                 line-height: inherit;
                 //   padding-right: 10px;
               }
             }
           }
         }
       }
     }

     .pageBox {
       display: flex;
       width: 100%;
       justify-content: left;
       margin-top: 10px;
     }


     /deep/ .el-dialog {
       .mainInfoBox {
         width: 100%;
         max-height: 60vh;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         flex-wrap: wrap;
         overflow-y: auto;

         .infoBox {
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
           height: 40px;
           width: 30%;

           label {
             width: 100px;
           }

           .el-input {
             flex: 1 1 auto;
           }
         }
       }
     }
   }


   .search_box {
     background: #fff;
     border-radius: 10px;
     padding: 40px 40px 20px 40px;
     margin: 0 0 20px 0;
   }

   .box_center {
     text-align: left;
   }

   .searchBtn {
     margin-left: 80px;
   }

   .search_box .inpText{
     width: 75px;
     justify-content: space-between;
     text-align: right;
     display: inline-block;
   }

   .el-col-12{
     width: auto;
   }

</style>
